<template>
    <div class="back-box">
        <div class="back-in-black" :data-text="text">
            {{ text }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World',
        },
    }
}
</script>

<style lang="less" scoped>
.back-in-black {
    position: relative;
    background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #E4E5E6;
    &::before {
        z-index: -1;
        text-shadow: -0.001em -0.001em 1px rgb(255 255 255 / 15%);
    }
    &::after {
        z-index: -2;
        text-shadow: 10px 10px 10px rgb(0 0 0 / 50%),
            20px 20px 20px rgb(0 0 0 / 40%),
            30px 30px 30px rgb(0 0 0 / 10%);
        mix-blend-mode: multiply;
    }
    &::before, &::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>